<template>
  <div class="home">
    <layout :msg="msghome" />

    <div class="echartsClass">
      <el-button @click="Tout">退出登录</el-button>
      <line-charts :chartData="lineData.dataTotle"></line-charts>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.echartsClass {
  width: 80%;
  height: 275px;
}
.home {
  display: flex;
}
</style>;
<script>
// @ is an alias to /src
import Layout from "@/components/Layout.vue";
import lineCharts from "@/components/lineCharts.vue";

export default {
  name: "home",
  data() {
    return {
      msghome: "菜单组件",
      lineData: {
        dataTotle: {
          text: "业务员本月销售排行榜",
          xData: ["方管", "槽钢", "角钢", "铝锭", "圆钢", "铜棒", "钢管"],
          name: "万元",
          islegend: false, //是否显示图例
          series: [
            {
              name: "销售额",
              type: "bar",
              data: [150, 100, 175, 220, 125, 175, 125],
              barWidth: 10, //设置柱条的宽度
              isclor: true, //柱形条是否双色
            },

            {
              name: "销售额环比",
              type: "line",
              yAxisIndex: 1,
              data: [225, 165, 245, 250, 180, 205, 240],
            },
          ],
        },
      },
    };
  },
  methods: {
    Tout() {
      sessionStorage.clear();
      window.location.reload();
    },
  },
  components: {
    Layout,
    lineCharts,
  },
};
</script>
